<style lang="less">
    @import './styles/infor-card.less';
</style>

<template>
    <Card :padding="0">
        <div class="infor-card-con">
            <i-col class="infor-card-icon-con" :style="{backgroundColor: color, color: 'white'}" span="8">
            <Row class="height-100" type="flex" align="middle" justify="center">
                <Icon :type="iconType" :size="iconSize"></Icon>
            </Row>
            </i-col>
            <i-col span="16" class="height-100">
            <Row type="flex" align="middle" justify="center" class="height-100">
                <count-up
                        class="infor-card-count user-created-count"
                        :id-name="idName"
                        :end-val="endVal"
                        :color="color"
                        :countSize="countSize"
                        :countWeight="countWeight"
                >
                    <p class="infor-intro-text" slot="intro">{{ introText }}</p>
                </count-up>
            </Row>
            </i-col>
        </div>
    </Card>
</template>

<script>
  import countUp from './countUp.vue';

  export default {
    name: 'inforCard',
    components: {
      countUp
    },
    props: {
      idName: String,
      endVal: Number,
      color: String,
      iconType: String,
      introText: String,
      countSize: {
        type: String,
        default: '30px'
      },
      countWeight: {
        type: Number,
        default: 700
      },
      iconSize: {
        type: Number,
        default: 40
      }
    }
  };
</script>

